<template>
  <div class="channeledit">
    <!-- 顶部通过cell布局 -->
    <van-cell title="我的频道" center :border="false" class="cellTitle">
      <van-button
        type="danger"
        size="mini"
        plain
        round
        class="cellButton"
        @click="isEdit = !isEdit"
        >{{ isEdit ? "完成" : "编辑" }}</van-button
      >
    </van-cell>
    <!-- 频道通过grid单元格布局
         当前频道进行高亮显示
         若是当前tabs激活标签与当前选中index相等
     -->
    <van-grid gutter="8px" class="grid">
      <van-grid-item
        v-for="(channel, index) in channels"
        :key="channel.id"
        :class="{ activeName: activeName === index }"
        :text="channel.name"
        :icon="isEdit && index !== 0 ? 'clear' : ''"
        @click="EditChannel(index, channel.id)"
      />
    </van-grid>
    <van-cell title="推荐频道" center :border="false" class="cellTitle" />
    <van-grid gutter="8px" class="grid">
      <van-grid-item
        v-for="channel in leftChannels"
        :key="channel.id"
        :text="channel.name"
        @click="addChannel(channel)"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'ChannelEdit',
  data () {
    return {
      allChannels: [],
      isEdit: false// 控制编辑删除图标的显示隐藏
    }
  },
  props: {
    channels: {
      type: Array,
      required: true
    },
    activeName: {
      type: Number,
      required: true
    }
  },
  computed: {
    // 剩余频道
    leftChannels () {
      // 过滤器筛选
      // 对所有频道数组进行遍历，再对已有频道数组遍历，如果发现，则不需要
      // 剩余频道 = 所有频道 - 已有频道
      return this.allChannels.filter(channel => {
        return !this.channels.find(userchannel => userchannel.id === channel.id)
      })
    }
  },
  created () {
    this.getAllChannels()
  },
  methods: {
    // 获取所有频道
    async getAllChannels () {
      const { data: res } = await this.$https.get('/app/v1_0/channels')
      this.allChannels = res.data.channels
      console.log(this.allChannels)
    },
    // 频道编辑
    EditChannel (index, id) {
      // 如果使编辑状态，则删除对应的频道
      // 之后vue会重新渲染整个页面，导致剩余channel和当前channels都会发生变化
      if (this.isEdit && index !== 0) {
        // 高亮bug，当删除当前高亮频道之前的频道，会使高亮频道的显示后移，因为index和activaName没变
        if (this.activeName >= index) { this.$emit('updateActiveName') }
        this.channels.splice(index, 1)
        // 服务器数据修改，数据持久化
        this.$https.delete(`/app/v1_0/user/channels/${id}`)
        this.$toast.fail('删除失败！')
      } else {
        // 如果是完成状态，则进行关闭编辑弹出层、切换频道
        this.$emit('changeChannel', index)
      }
    },
    // 添加频道
    addChannel (channel) {
      this.channels.push(channel)
      // 已经成功，但是后端防止多人使用测试账号搞乱数据已经不能更新
      this.$https.patch('/app/v1_0/user/channels', {
        channels: [
          {
            id: channel.id,
            seq: this.channels.length
          }
        ]
      })
    },
    // 数据库channels更新
    updateChannels () {

    }
  }
}
</script>

<style scoped lang="less">
.channeledit {
  padding: 50px 5px;
  .cellTitle {
    font-size: 16px;
    color: #333;
    .cellButton {
      width: 50px;
    }
  }
  /deep/.grid {
    .van-grid-item__content {
      background-color: #f4f5f6;
    }
    .van-grid-item__text {
      font-size: 14px;
      color: #222;
      margin-top: 0;
    }
    .van-grid-item__icon {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 18px;
      color: #ccc;
    }
  }
  .activeName {
    /deep/ .van-grid-item__text {
      color: red;
    }
  }
}
</style>
